.attention-icon {
	right: 5px;
	top: -3px;
	z-index: 15;
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 20px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	opacity: 0;
	color: white;
}
.attention-icon:hover {
	border-radius: 20px 20px 0 0;
}
.attention-menu {
	position: absolute;
	right: 0px;
	top: 22px;
	z-index: 13;
	border-radius: 12px 0 12px 12px;
	font-size: 12px;
	color: white;
	font-weight: normal;
	padding: 20px 0;
}
.attention-menu p {
	font-style: italic;
}
.attention-menu-article {
	white-space: nowrap;
	padding: 4px;
}
.attention-menu-article:hover {
	background: rgba(200,200,200,.2);
}
.attention-action, .attention-action  .attention-menu {
	background: #666;
}
.attention-alert, .attention-alert .attention-menu {
	background: red;
}
.attention-alert.attention-seen, .attention-alert.attention-seen .attention-menu {
	background: green;
}
.message:hover .attention-icon.attention-action,
.message:hover .attention-icon.attention-alert.attention-seen {
	opacity: 1;
	transition: opacity .5s;
}
.attention-icon.attention-alert {
	opacity: 1;
	transition: opacity .6s;
}
.attention-icon.attention-alert:not(.attention-seen) {
	animation-name: pulse;
	animation-duration: .6s;
//	animation-timing-function: ease-out;
}
.attention-icon.attention-alert.attention-seen {
	opacity: 0;
}

@keyframes pulse {
	0% { transform: scale(.7); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
